<template>
  <div class="markUpLayer-bg">
    <VueDragResize ref="dragable" :resizable="false" :draggable="isViewDragable" class-name="table-drag-resize" :x="800"
      :y="300">
      <div class="markUpLayer">
        <div class="title">
          <span class="title-tip">{{
            $t("message.cadViewer.layerDialog.layerTitle")
          }}</span>
          <i class="el-icon-close" @click="onCancelClick"></i>
        </div>
        <div class="layer-body">
          <div class="layer-btn-view">
            <button class="new-layer" @click="onAddClick">
              <i class="el-icon-plus"></i>
              <span>{{ $t("message.cadViewer.layerDialog.newLayer") }}</span>
            </button>
            <div class="select-view">
              <el-select style="width: 120px" v-model="selectColorValue"
                :placeholder="$t('message.cadViewer.tl_menu_modify.color')" @change="onSelectColor">
                <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
                  <div style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                    <span
                      :style="`width:12px;height:12px;border:1px solid rgba(226,226,226,1);background:${item.value}`"></span>
                    <span style="float: right">{{ item.label }}</span>
                  </div>
                </el-option>
              </el-select>
              <button class="deleteBtn" @click="onDeleteClick">
                <i class="el-icon-delete"></i>
                <span>{{ $t("message.public.delete") }}</span>
              </button>
            </div>
          </div>
          <div class="table-view">
            <el-table ref="multipleTable" :data="layersData" tooltip-effect="dark" style="width: 100%" max-height="204"
              highlight-current-row @current-change="handleCurrentChange" @selection-change="handleSelectionChange"
              :cell-style="{
                fontSize: '14px',
                textAlign: 'left',
                padding: '4px',
              }" :header-cell-style="{
                color: 'rgba(144,147,153,1)',
                fontSize: '14px',
                textAlign: 'left',
                background: '#FAFAFA',
                fontWeight: '600',
                padding: '4px',
              }" :row-style="{
                color: 'rgba(96,98,102,1)',
                backgroundColor: 'transparent',
                fontSize: '14px',
                textAlign: 'left',
              }">
              >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column prop="sName" :label="$t('message.cadViewer.layerDialog.layerName')">
                <template slot-scope="scope">
                  <div style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                    <el-input v-model="scope.row.sName" @blur="onInputBlur" @focus="onInputFocus"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="nColor" :label="$t('message.cadViewer.tl_menu_modify.color')" width="118">
                <template slot-scope="scope">
                  <div style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                    <span
                      :style="`width:12px;height:12px;border:1px solid rgba(226,226,226,1);background:${scope.row.nColor}`"></span>
                    <!-- <span style="float: right">{{ scope.row.nColor }}</span> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="layer-select">
            <span class="label">{{
              $t("message.cadViewer.layerDialog.defaultLayer")
            }}</span>
            <el-select style="width: 180px" v-model="activeSelectedId"
              :placeholder="$t('message.cadViewer.layerDialog.selectTip')">
              <el-option v-for="(item, index) in layersData" :key="index" :label="item.sName"
                :value="index"></el-option>
            </el-select>
          </div>
          <div class="footer">
            <button class="footer-btn" @click="onCancelClick">Cancel</button>
            <button class="footer-btn" @click="onOkClick" style="color: rgba(255, 255, 255, 1); background: #106EBE">
              OK
            </button>
          </div>
        </div>
      </div>
    </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from "vue-draggable-resizable";
// 导出模块
export default {
  // 模块名字
  name: "markUpLayer",
  props: {
    activeLayerIndex: {
      type: Number,
      default: -1,
    },
    layersData: {
      type: Array,
      default: null,
    },
  },
  // 模块数据
  data() {
    //数据
    return {
      selectColorValue: "赤色",
      cities: [
        {
          value: "#FF0000",
          label: "赤色",
        },
        {
          value: "#000000",
          label: "黒色",
        },
        {
          value: "#1842FF",
          label: "青色",
        },
        {
          value: "#00FF00",
          label: "緑色",
        },
        {
          value: "#00FFFF",
          label: "水色",
        },
        {
          value: "#BF00FF",
          label: "紫色",
        },
        {
          value: "#FFFF00",
          label: "黄色",
        },
        {
          value: "#FFFFFF",
          label: "白色",
        },
      ],
      activeSelectedId: "",

      selectedTableLayerId: -1,
      inputStr: "",

      isViewDragable: true,

      // multipleSelection: [],
    };
  },
  // 注册组件
  components: {
    VueDragResize,
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    onSelectColor(e) {
      if (this.selectedTableLayerId == -1) return;

      for (var i = 0; i < this.layersData.length; i++) {
        if (this.layersData[i].id == this.selectedTableLayerId) {
          this.layersData[i].nColor = e;
          break;
        }
      }
    },

    handleCurrentChange(e) {
      // debugger;
      if (e != null) {
        this.selectedTableLayerId = e.id;
        this.selectColorValue = e.nColor;
      } else {
        this.selectedTableLayerId = -1;
        this.selectColorValue = "#FFFFFF";
      }
    },

    onOkClick() {
      this.$emit("onOkClick", this.layersData, this.activeSelectedId);
    },

    onCancelClick() {
      this.$emit("onCancelClick", null);
    },

    handleSelectionChange(e) {
      // return;

      if (e == null) return;

      for (var i = 0; i < this.layersData.length; i++) {
        this.layersData[i].nState = 0;
        for (var j = 0; j < e.length; j++) {
          if (this.layersData[i].id == e[j].id) {
            this.layersData[i].nState = 1;
          }
        }
      }
    },

    onDeleteClick() {
      if (this.selectedTableLayerId == -1) {
        this.$alert(this.$t("message.cadViewer.layerDialog.selectFirstTip"), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return;
      }

      if (this.layersData.length <= 1) {
        this.$alert(this.$t("message.cadViewer.layerDialog.selectLayerOneTip"), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return;
      }

      var _self = this;
      this.$confirm(
        this.$t("message.cadViewer.layerDialog.deleteLayerTitle"),
        this.$t("message.public.tip"),
        {
          confirmButtonText: this.$t("message.public.confirm"),
          cancelButtonText: this.$t("message.public.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          // let selectedId = _self.selectedTableLayerId;

          for (var i = 0; i < _self.layersData.length; i++) {
            if (_self.layersData[i].id == _self.selectedTableLayerId) {
              _self.layersData.splice(i, 1);

              if (_self.activeSelectedId == _self.selectedTableLayerId) {
                _self.activeSelectedId = _self.layersData[0].id;
              }

              _self.selectedTableLayerId = -1;
              break;
            }
          }
        })
        .catch(() => { });
    },

    updateCheckedLayers() {
      //       for(var i = 0 ; i < this.layersData.length;i++ ) {
      //   if()
      // }
      var multipleSelection = [];
      for (var i = 0; i < this.layersData.length; i++) {
        if (this.layersData[i].nState == 1) {
          multipleSelection.push(this.layersData[i]);
        }
      }
      this.toggleSelection(multipleSelection);
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    onAddClick() {
      var newLayer = {};
      newLayer.sName = "no_name_00";
      newLayer.nColor = "#FF0000";
      newLayer.nFillType = "0";
      newLayer.nFillColor = "#FF0000";
      newLayer.nPenStyle = "0";
      newLayer.nState = "1";
      newLayer.id = Number(this.layersData[this.layersData.length - 1].id) + 1;

      this.layersData.push(newLayer);

      this.toggleSelection([newLayer]);
    },

    onInputBlur(e) {
      // console.log("onInputBlur(e)")
      this.isViewDragable = true;
    },

    onInputFocus(e) {
      // console.log("onInputFocus(e)")
      this.isViewDragable = false;
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.activeSelectedId = this.activeLayerIndex;
    // multipleSelection
    this.updateCheckedLayers();
  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() {
    // 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素  
    var elements = document.querySelectorAll('.elx-cell--checkbox');

    // 遍历这些元素  
    elements.forEach(function (element) {
      // 修改每个元素的title属性  
      element.setAttribute('title', '');
    })
  },
  // 销毁前状态(里面是操作)
  beforeDestroy() { },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.markUpLayer-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
}

.markUpLayer {
  width: 460px;
  height: 438px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03),
    0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;

    .title-tip {
      margin-left: 24px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }

    .el-icon-close {
      margin-right: 24px;
      color: #000000;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .layer-body {
    padding: 16px 16px 24px 16px;
    height: calc(100% - 40px);

    .layer-btn-view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 32px;

      .new-layer {
        padding: 6px 16px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.85);

        span {
          margin-left: 8px;
        }

        background: #106EBE;
        border-radius: 4px;
      }

      .select-view {
        .deleteBtn {
          min-width: 62px;
          padding: 6px 16px;
          font-size: 14px;
          border-radius: 4px;
          border: 1px solid rgba(217, 217, 217, 1);
          height: 32px;
          color: rgba(0, 0, 0, 0.65);
          margin-left: 12px;

          span {
            margin-left: 8px;
          }
        }

        ::v-deep .el-input--suffix .el-input__inner {
          width: 120px;
          height: 32px;
        }

        ::v-deep .el-input__icon {
          line-height: 32px;
        }
      }
    }

    .table-view {
      width: 100%;
      height: 206px;
      border: 1px solid rgba(235, 238, 245, 1);
      margin-top: 16px;

      ::v-deep .el-input__inner {
        height: 28px;
      }
    }

    .layer-select {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 16px;
      color: rgba(0, 0, 0, 0.85);

      ::v-deep .el-input--suffix .el-input__inner {
        width: 180px;
        height: 32px;
      }

      ::v-deep .el-input__icon {
        line-height: 32px;
      }
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 20px;

      .footer-btn {
        width: 82px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(217, 217, 217, 1);
        font-size: 14px;
        border-radius: 4px;
        color: rgba(0, 0, 0, 0.65);
        margin-left: 16px;
      }
    }
  }
}

.el-select-dropdown__item {
  padding: 0 15px;
}
</style>
